{template 'header'}
    <style>
        .bg {
            background-image: url("{MODULE_URL}assets/img/logo_bg.png");
            position: fixed;
            z-index: -1;
            opacity: .8;
            width: 100vw;
            height: 100vh;
            top: 0;
            background-size: 100% 100%;
        }
        .cent{
            width: 80vw;
            background: rgba(255,255,255,.3);
            border-radius: 3vw;
            position: fixed;
            top:24vh;
            left: calc(50% - 40vw);
            padding-bottom: 20px;
        }
        ul{
            list-style: none;
            padding: 0;
        }
        .cent input{
            border: none;
            font-size: 14px;
            width: 90%;
            background: #fff;
            margin-left: 5%;
            padding-left: 10vw;
        }
        .cent ul li{
            position: relative;
        }
        .cent ul li span{
            position: absolute;
            top: 1vh;
            left: 7vw;
        }
        .mui-btn{
            width: 80%;
            margin: 1vh auto;
            font-size: 14px;
            padding: 8px;
            background: #2bcd47;
        }
        .cent h5{
            text-align: center;
            font-size: 24px;
            letter-spacing: 2rem;
            padding-left: 7vw;
        }
        .login-logo{
            width: 20vw;
            height: 20vw;
            background: #008cff ;
            border-radius: 50%;
            margin: -56px auto 0 auto;
            text-align: center;
            line-height: 20vw;
            padding-top: 1vh;
        }
        .login-logo i{
            color: #fff;
            text-align: center;
            font-size: 12vw;
        }
        .mui-btn-green{
            background: #008cff;
            border:none;
        }
        .register ,.forget{
            font-size: 12px;
            color: #fff;
            padding-left: 12px;
        }
        .forget{
            text-align: right;
            padding-right: 12px;
        }
    </style>
</head>
<body>
<div class="bg"></div>
<div class="cent" id="login-1">
    <div class="login-logo"><i class="mui-icon mui-icon-contact"></i></div>
    <h5>注册</h5>
    <ul>
        <li>
            <span class="mui-icon mui-icon-person"></span>
            <input type="text" placeholder="请输入手机号" id="mobile">
        </li>
        <li>
            <span class="mui-icon mui-icon-locked"></span>
            <input type="password" placeholder="请输入密码" id="password">
        </li>
        <li>
            <span class="mui-icon mui-icon-locked"></span>
            <input type="password" placeholder="请输入密码" id="sure_password">
        </li>
        <button class="mui-btn mui-btn-block mui-btn-green" onclick="register()">注册</button>
    </ul>
    <div class="mui-row">
        <a href="{php echo $this->createMobileUrl('public',array('op'=>'login'))}" class="mui-col-xs-6 mui-col-sm-6 register">老用户登录</a>
    </div>
</div>
<script src="{MODULE_URL}assets/js/jquery.min.js"></script>
<script src="{MODULE_URL}assets/js/mui.min.js"></script>
<script>
    function checkMobile(mobile){
        if(mobile==''){
            return false;
        }
        var myreg = /^[1][3,4,5,7,8][0-9]{9}$/;
        if (!myreg.test(mobile)) {
            return false;
        } else {
            return true;
        }
    }
    function register() {
        var mobile = $('#mobile').val()
        var password = $('#password').val();
        var password1 = $('#sure_password').val()
        if(!checkMobile(mobile)){
            mui.toast('请输入有效的手机号');
            return false
        }
        if(password.length<6){
            mui.alert('请输入长度大于6的密码');
            return false
        }
        if(password != password1){
            mui.toast('两次输入的密码不一致');
            return false
        }
        var url = '{php echo $this->createMobileUrl("public",array("op"=>"register"))}';
        var pid = '{$pid}'
        mui.post(url,{mobile,password,password1,pid},function(ret){
            if(ret.code){
                mui.alert(ret.msg,'',function () {
                    location.href = '{php echo $this->createMobileUrl("index",array("op"=>"index"))}'
                });
            }else{
                mui.alert(ret.msg)
            }
        },'json');
    }
</script>
</body>
</html>